<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>3-blog-posts</title>
  </head>

  <body>
    <div id="blog-posts-demo">
      <div v-bind:style="{ fontSize: postFontSize + 'em' }">
        <blog-post
          v-for="post in posts"
          :key="post.id"
          :title="post.title"
          @enlarge-text="postFontSize += 0.1"
        ></blog-post>
      </div>
    </div>
    <script>
      const App = {
        data() {
          return {
            posts: [
              { id: 1, title: 'My journey with Vue' },
              { id: 2, title: 'Blogging with Vue' },
              { id: 3, title: 'Why Vue is so fun' },
            ],
            postFontSize: 1,
          };
        },
      };

      const app = Vue.createApp(App);

      app.component('blog-post', {
        props: ['title'],
        emits: ['enlarge-text'],
        // 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：
        template: ` <h4>{{title}}</h4>
                    <button @click="$emit('enlarge-text')">
                      Enlarge text
                    </button>
                  `,
      });

      app.mount('#blog-posts-demo');
    </script>
  </body>
</html>
